<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="left">
          <div class="header">日销售统计</div>
          <div class="body">
            <div class="stats">
              <div class="item">
                <div class="num">{{ formDay.count }}</div>
                <div class="title">当日销售量（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num">{{ formDay.amount }}</div>
                <div class="title">当日销售额（元）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num">{{ formDay.sum }}</div>
                <div class="title">当日分成（元））</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="right">
          <div class="header">月销售统计</div>
          <div class="body">
            <div class="stats">
              <div class="item">
                <div class="num colorred">{{ formMonth.count }}</div>
                <div class="title color">当月销售量（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num colorred">{{ formMonth.amount }}</div>
                <div class="title color">当月销售额（元）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num colorred">{{ formMonth.sum }}</div>
                <div class="title color">当月分成（元））</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="footer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="合作商:">
          <el-select v-model="formInline.user" placeholder="活动区域" clearable>
            <el-option
              v-for="item in partnerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期:">
          <div class="block">
            <el-date-picker
              v-model="formInline.time"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="sum">
        <span class="lable">笔数统计：</span>&nbsp;&nbsp;
        <span class="value">{{ formPartner.count }}</span>&nbsp;&nbsp;
        <span class="unit">个</span>
        <span class="lable">收入统计：</span>&nbsp;&nbsp;
        <span class="value">{{ formPartner.amount }}</span>&nbsp;&nbsp;
        <span class="unit">元</span>
        <span class="lable">分成统计</span>&nbsp;&nbsp;
        <span class="value">{{ formPartner.sum }}</span>&nbsp;&nbsp;
        <span class="unit">元</span>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="订单日期" width="180" />
        <el-table-column prop="ownerName" label="合作商" width="180" />
        <el-table-column prop="ratio" label="分成比例" />
        <el-table-column prop="orderTotalMoney" label="收入（元）" />
        <el-table-column prop="orderCount" label="笔数" />
        <el-table-column prop="totalBill" label="分成金额（元）" />
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  totalBill,
  partnerCollect,
  orderAmount,
  orderCount,
  partnerList
} from '@/api/renyuan'
import getDateFn from '@/views/Personnel/utils/time'
export default {
  name: 'Duizhang',
  data() {
    return {
      formInline: {
        user: '',
        time: [getDateFn.getMonth('s', 0), getDateFn.getDate(0)]
      },
      tableData: [],
      partnerList: [],
      // 日
      formDay: {
        count: 0,
        amount: 0,
        sum: 0
      },
      // 月
      formMonth: {
        count: 0,
        amount: 0,
        sum: 0
      },

      formPartner: {
        count: 0,
        amount: 0,
        sum: 0
      },

      partnerName: null,

      // 合作商id
      partnerId: null,
      innerCode: null,
      // 当日初始时间
      timeDay: getDateFn.getDate(0) + ' 00:00:00',
      timeEndDay: getDateFn.getDate(0) + ' 23:59:59',
      // 月初始时间
      timeMounth: getDateFn.getMonth('s', 0) + ' 00:00:00'
    }
  },
  async created() {
    this.partnerList = (
      await partnerList({ pageIndex: 1, pageSize: 1000 })
    ).currentPageRecords
    // 日分成
    const a = await this.sharingSum(this.timeDay, this.timeEndDay)
    // 月分成
    const b = await this.sharingSum(this.timeMounth, this.timeEndDay)
    // 日销售额
    const c = await this.salesAmount(this.timeDay, this.timeEndDay)
    // 月销售额
    const d = await this.salesAmount(this.timeMounth, this.timeEndDay)
    // 日销售量
    const e = await this.salesCount(this.timeDay, this.timeEndDay)
    // 月销售量
    const f = await this.salesCount(this.timeMounth, this.timeEndDay)
    // 合作商统计
    const g = await this.sharingSum(this.timeMounth, this.timeEndDay)
    const h = await this.salesAmount(this.timeMounth, this.timeEndDay)
    const i = await this.salesCount(this.timeMounth, this.timeEndDay)
    this.formDay.sum = a
    this.formMonth.sum = b
    this.formDay.amount = c
    this.formMonth.amount = d
    this.formDay.count = e
    this.formMonth.count = f
    this.formPartner.sum = g
    this.formPartner.amount = h
    this.formPartner.count = i
    // 合作商汇总表（默认本月）
    this.tableData = (
      await this.partnercollect(
        getDateFn.getMonth('s', 0),
        getDateFn.getDate(0)
      )
    ).currentPageRecords
  },
  methods: {
    async onSubmit() {
      // 查询三个统计数据
      console.log(this.formInline)
      this.partnerId = this.formInline.user
      const a = await this.sharingSum(
        this.formInline.time[0] + ' 00:00:00',
        this.formInline.time[1] + ' 23:59:59'
      )
      const b = await this.salesAmount(
        this.formInline.time[0] + ' 00:00:00',
        this.formInline.time[1] + ' 23:59:59'
      )
      const c = await this.salesCount(
        this.formInline.time[0] + ' 00:00:00',
        this.formInline.time[1] + ' 23:59:59'
      )
      this.formPartner.sum = a
      this.formPartner.amount = b
      this.formPartner.count = c

      this.partnerName = this.partnerList.find(
        item => item.id === this.formInline.user
      ).name
      this.tableData = (
        await this.partnercollect(
          this.formInline.time[0],
          this.formInline.time[1]
        )
      ).currentPageRecords
    },

    // 分成金额
    sharingSum(start, end) {
      const res = totalBill({ partnerId: this.partnerId, start, end })
      return res
    },
    // 销售额
    salesAmount(start, end) {
      const res = orderAmount({
        partnerId: this.partnerId,
        innerCode: this.innerCode,
        start,
        end
      })
      return res
    },
    // 销售量
    salesCount(start, end) {
      const res = orderCount({
        partnerId: this.partnerId,
        innerCode: this.innerCode,
        start,
        end
      })
      return res
    },
    // 合作商汇总
    partnercollect(start, end) {
      const res = partnerCollect({
        partnerName: this.partnerName,
        pageIndex: 1,
        pageSize: 10,
        start,
        end
      })
      console.log(res)
      return res
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  .el-col {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    .left {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
        Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
        sans-serif;
      box-sizing: border-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      height: calc(25vh - 30px);
      min-height: 166px;
      background: #e9f3ff;
      background-image: url('./assets/img/left.png'),
        url('./assets/img/left-1.png');
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, calc(100% - 12px) 100%;
      padding: 20px;
      border-radius: 20px;
    }
    .right {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
        Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
        sans-serif;
      box-sizing: border-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      height: calc(25vh - 30px);
      min-height: 166px;
      background: #fbefe8 url('./assets/img/right-1.png') no-repeat
        calc(100% - 12px) 100%;
      padding: 20px;
      border-radius: 20px;
    }
    .body {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
        Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
        sans-serif;
      -webkit-box-direction: normal;
      box-sizing: border-box;
      -webkit-box-flex: 1;
      flex: 1;
      display: flex;
      .stats {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
          Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
          sans-serif;
        -webkit-box-direction: normal;
        box-sizing: border-box;
        -webkit-box-flex: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        .item {
          line-height: 1.15;
          -webkit-text-size-adjust: 100%;
          -webkit-font-smoothing: antialiased;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
            Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
            Microsoft YaHei, Arial, sans-serif;
          box-sizing: border-box;
          display: inline-flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          flex-direction: column;
          .num {
            -webkit-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            -webkit-box-direction: normal;
            box-sizing: border-box;
            height: 50px;
            font-size: 36px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            line-height: 50px;
            color: #072074;
            text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
          }
          .title {
            -webkit-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            -webkit-box-direction: normal;
            box-sizing: border-box;
            height: 17px;
            margin-top: 3px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 17px;
            color: #91a7dc;
          }
        }
      }
    }
  }
}
.colorred {
  color: #ff5757 !important;
  text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5) !important;
}
.color {
  color: #de9690 !important;
}
.footer {
  margin-top: 20px;
  padding: 20px;
  width: 100%;
  background-color: #fff;
}
.sum {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 0 0 18px;
  .label {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
      Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
      sans-serif;
    box-sizing: border-box;
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }
  .value {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
      Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
      sans-serif;
    box-sizing: border-box;
    font-size: 20px;
    color: #ff5757;
    font-weight: 500;
  }
  .unit {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
      Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
      sans-serif;
    box-sizing: border-box;
    margin-right: 50px;
    font-size: 12px;
    color: #000;
  }
}
</style>
